﻿<html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--[if lte IE 8]><script language="javascript" type="text/javascript" 
    src="../excanvas.min.js"></script><![endif]-->
    <script language="javascript" type="text/javascript" 
    src="http://people.iola.dk/olau/flot/jquery.js"></script>
    <script language="javascript" type="text/javascript" 
    src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
 </head>
<body>

<div id="placeholder" style="width:600px;height:300px;"></div>

<div>
from:<input id="from" type="text" value="0" size="4"/>
to:<input id="to" type="text" value="10" size="4"/>
step:<input id="step" type="text" value="0.5" size="4"/>
</div>

<textarea id="shell" cols="60" rows="10">
sin(x)
cos(x)
</textarea>

<script type="text/javascript">

var sin=Math.sin;
var cos=Math.cos;
var tan=Math.tan;
var cot=Math.cot;
var sec=Math.sec;
var csc=Math.csc;
var ceil=Math.ceil;
var exp=Math.exp;
var floor=Math.floor;
var log=Math.log;
var max=Math.max;
var min=Math.min;
var pow=Math.pow;
var random=Math.random;
var round=Math.round;
var sqrt=Math.sqrt;

function ExpCurve(from, to, step) {
  this.from = from;
  this.to = to;
  this.step = step;
  this.plotsList = [];

  this.curve = function(code) {
    var plots = [];
    for (var x = this.from; x < this.to; x += this.step)
        plots.push([x, eval(code)]);
    return { label: code, data: plots };
  }

  this.curveList = function(codeList) {
    var size=this.plotsList.length;
    for (var i=0; i<codeList.length; i++)
        this.plotsList[size+i] = this.curve(codeList[i]);
    return this.plotsList;    
  }

  return this;
}

function drawCurveList(target, codeList, from, to, step) {
  var c = new ExpCurve(from, to, step);
  $.plot($(target), c.curveList(codeList), {
        series: {
            lines: { show: true },
            points: { show: true },
			bars: { show: true, barWidth: step }
        }  
  });
  return c;
}

function drawGraph() {
    var from = eval($("#from").val());
    var to   = eval($("#to").val());
    var step = eval($("#step").val());
    var codeList = $("#shell").val().split("\n");
    return drawCurveList("#placeholder", codeList, from, to, step);
}

function keyEnter(event) {
  if (event.which == 13) {
//     event.preventDefault();
     drawGraph();
  }
}

$(drawGraph);
$("#shell").keypress(keyEnter);
$("#from").keypress(keyEnter);
$("#to").keypress(keyEnter);
$("#step").keypress(keyEnter);
</script>

 </body>
</html>
